<template>
  <div class="container">
    <el-dialog :visible="showArtPreDialog" title="预览文章" @close="$emit('closeArtPreDialog')">
      <div>
        <h2>{{ title }}</h2>
        <span style="font-style: 15px;">{{ createTime | formatDate }} {{ currentUsername }}  <i class="el-icon-view" />  {{ visits }}</span>

      </div>
      <div class="articleBody" v-html="articleBody" />
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/articles.js'
import moment from 'moment'
export default {
  name: 'ArticlePreview',
  filters: {
    formatDate(val) {
      return moment(val).format('YYYY-MM-DD hh:mm:ss')
    }
  },
  props: {
    showArtPreDialog: {
      type: Boolean,
      default: false
    },
    // currentNodeTitle: {
    //   type: String,
    //   default: ''
    // },
    currentNodeId: {
      type: Number,
      default: null
    },
    // 当前节点的录入人
    currentUsername: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // detail: {},
      // 文章标题
      title: '',
      // 录入时间
      createTime: '',
      // 浏览次数
      visits: '',
      // 文章内容
      articleBody: null

    }
  },
  methods: {
    async getArticleDetail() {
      const { data: { articleBody, createTime, visits, title }} = await detail({ id: this.currentNodeId })
      // this.detail = await detail({ id: this.currentNodeId })
      this.articleBody = articleBody
      this.createTime = createTime
      this.visits = visits
      this.title = title
    }
  }
}
</script>

<style scoped lang='scss'>
  .articleBody {
    margin-top: 10px;
    background-color: rgb(245, 245, 245);
    padding: 10px;
    border-top: 1px dashed gray;
  }
</style>
